<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建BFC - arry老师</title>
    <style>
      .order-progress {
        text-align: center;
      }
      ul {
        /* border: 1px solid red; */
        font-size: 0;
        list-style: none;
        display: inline-block;
      }
      ul li {
        /* 右浮动实现元素从右往左开始排列 */
        float: right;
      }
      ul li:nth-child(even) {
        width: 150px;
        border-top: 2px dashed #ddd;
        /* 通过相对定位来微调线条位置，实现线条与圆垂直居中对齐 */
        position: relative;
        top: 24px;
      }
      ul li:nth-child(odd) {
        background-color: #ddd;
        width: 50px;
        height: 50px;
        font-size: 16px;
        margin: 0px 5px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
      }
      /* 当前进度 */
      ul li.current {
        background-color: skyblue;
        color: #fff;
      }
      /* 当前进度前面的元素偶数项样式 */
      ul li.current ~ li:nth-child(odd) {
        background-color: skyblue;
        color: #fff;
      }
      /* 当前进度前面的元素奇数项样式 */
      ul li.current ~ li:nth-child(even) {
        border-color: skyblue;
      }
    </style>
    <body>
      <div class="order-progress">
        <ul>
          <li>5</li>
          <li></li>
          <li>4</li>
          <li></li>
          <li class="current">3</li>
          <li></li>
          <li>2</li>
          <li></li>
          <li>1</li>
        </ul>
      </div>
    </body>
</html>
